<template>
  <div class="home">
    <h3>{{msg}}</h3>
    <div class="box">
      <ul class="info">
        <li v-for="(item,index) in datas">
          <img :src="item.imgUrl">
        </li>
      </ul>
    </div>

     <ul class="menuList">
        <li v-for="(item,index) in lists"
          class="menu"
        >
        <router-link :to="{name:item.name}"> {{item.text}}</router-link>
        </li>
    </ul>
  </div>
</template>

<script>

let dataImgs=[
    {
        imgUrl:require("../assets/images/image1.jpg")
    },
     {
        imgUrl:require("../assets/images/image2.jpg")
    },
     {
        imgUrl:require("../assets/images/image3.jpg")
    },
     {
        imgUrl:require("../assets/images/image4.jpg")
    },
     {
        imgUrl:require("../assets/images/image5.jpg")
    },
     {
        imgUrl:require("../assets/images/image6.jpg")
    }
]

var list=[
  {
    name:'jsTest',
    text:"es6Js练习"
  },
  {
    name:'jsPromise',
    text:"js-promise练习"
  }
]
export default {
  data() {
    return {
      msg: "3d",
      datas:dataImgs,
      lists:list
    }
  },
  methods:{
    handClick (item,index) {
       if(index==0){
         this.$router.push({name:"jsTest",params:{datas:'nihao'}})
       }
    }
  }
};
</script>

<style scoped>
@keyframes animateOne {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes animateTwo {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@-webkit-keyframes animateOne {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.home {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(#9ed128 10%, #358b98 80%);
  text-align: center;
}
.box {
  perspective: 800px;
  display: inline-block;
  margin-left: -100px;
  margin-top: 300px;
}
.info {
  transform-style: preserve-3d;
  animation: animateOne 8s infinite ease-in-out;
  -webkit-animation: animateOne 8s infinite ease-in-out;
  cursor: pointer;
}
.info li {
  width: 120px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
}

li:nth-child(1) {
  transform: translateZ(100px);
}
li:nth-child(2) {
  transform: translateZ(-100px);
}
li:nth-child(3) {
  transform: rotateY(90deg) translateZ(-100px);
}
li:nth-child(4) {
  transform: rotateY(90deg) translateZ(100px);
}
li:nth-child(5) {
  transform: rotateX(90deg) translateZ(100px);
}
li:nth-child(6) {
  transform: rotateX(90deg) translateZ(-100px);
}
.info:hover {
  animation-play-state: paused;
}
.info:hover li:nth-child(1) {
  transform: translateZ(200px);
}
.info:hover li:nth-child(2) {
  transform: translateZ(-200px);
}
.info:hover li:nth-child(3) {
  transform: rotateY(90deg) translateZ(-200px);
}
.info:hover li:nth-child(4) {
  transform: rotateY(90deg) translateZ(200px);
}
.info:hover li:nth-child(5) {
  transform: rotateX(90deg) translateZ(200px);
}
.info:hover li:nth-child(6) {
  transform: rotateX(90deg) translateZ(-200px);
}

.menuList{
  position: absolute;
  top:.5rem;
  left:.5rem;
  
}
.menu{
    cursor: pointer;
    color:#fff;
    padding:.2rem;
    float:left;
    margin:.2rem;
    background-color:red;
    border:1px solid #fff;
    box-shadow:0 0 10px blue;
   
  }
  a{
    color:#fff;
  }
</style>
